<template>
  <div class="padding30px">
    <!-- <a-card>
      <a-form :model="searchForm" layout="inline" @submit.prevent="handleSearch">
        <a-form-item label="用户名">
          <a-input v-model:value="searchForm.ogUserName" placeholder="输入用户名" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" htmlType="submit">搜索</a-button>
        </a-form-item>

        <a-form-item>
          <a-button @click="resetSearch">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card> -->

    <a-card title="在线用户列表">
      <!-- 操作按钮 -->
      <!-- <a-button @click="deleteSelect" style="margin-bottom: 16px" :disabled="rowSelectionSelecRow.length == 0">
        批量下线
      </a-button> -->

      <!-- 表格 -->
      <a-table
        :dataSource="onlineUsers"
        :columns="columns"
        :pagination="pagination"
        rowKey="ogId"
        bordered
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <!-- 登录时间格式化 -->
          <template v-if="column.dataIndex === 'ogOnlineTime'">
            {{ formatDate(record.ogOnlineTime) }}
          </template>

          <!-- 操作列 -->
          <!-- <template v-if="column.dataIndex === 'edit'">
            <a-button @click="viewDetail(record)">查看详情</a-button>
          </template> -->
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getAccessMenusApi } from '#/api/object/tonlinelisting'
import { crud } from '#/components/crud'

// 初始化搜索表单
const initSearchForm = {
  ogUserName: '',
}

const pagination = {
  current: 1,
  pageSize: 10,
  total: 0,
}
// 使用 useCrud 管理数据和操作
const {
  dataSource: onlineUsers,
  searchForm,
  selectedRowKeys: rowSelectionSelecRow,
  modalVisible,
  isEditMode,
  formData,
  loadData,
  handleTableChange,
  handleSearch,
  resetSearch,
  deleteSelected: deleteSelect,
  openAddModal,
  openEditModal,
  handleSubmit,
  handleCancel,
} = crud({
  getList: getAccessMenusApi,
}, initSearchForm)

// 表格列配置
const columns = [
  { title: '用户名', dataIndex: 'ogUserName', key: 'ogUserName', align: 'center' },
  { title: '登录时间', dataIndex: 'ogOnlineTime', key: 'ogOnlineTime', align: 'center' },
  { title: 'IP地址', dataIndex: 'ogIp', key: 'ogIp', align: 'center' },
  { title: '设备信息', dataIndex: 'ogEquipment', key: 'ogEquipment', align: 'center' },
  // { title: '操作', dataIndex: 'edit', key: 'edit', align: 'center' },
]

// 行选择配置
const rowSelection = {
  onChange: (selectedRowKeys) => {
    rowSelectionSelecRow.value = selectedRowKeys
  }
}

// 时间格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')} ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`
}

// 页面挂载时加载数据
onMounted(() => {
  loadData()
})

// 查看详情方法（可拓展为打开抽屉）
const viewDetail = (record) => {
  message.info(`查看用户 ID: ${record.ADDR}`)
  // 这里可以打开抽屉或者跳转到详情页
}
</script>

<style scoped>
.padding30px {
  padding: 30px;
}
</style>
